<script setup lang="ts">
import { ref } from 'vue'
import {
  SearchOutlined,
  StarOutlined,
  EyeOutlined,
  DownloadOutlined,
  AppstoreOutlined,
  MobileOutlined,
  DesktopOutlined,
  ApiOutlined,
} from '@ant-design/icons-vue'

// 搜索关键词
const searchKeyword = ref('')

// 分类筛选
const selectedCategory = ref('all')

// 应用数据
const apps = ref([
  {
    id: 1,
    name: 'AI 聊天助手',
    description: '智能对话机器人，支持多轮对话和上下文理解',
    category: 'ai',
    icon: AppstoreOutlined,
    image: '/xiaoguo.webp',
    author: '程序员鱼皮',
    stars: 1234,
    views: 5678,
    downloads: 890,
    tags: ['AI', '聊天', 'Vue3'],
    featured: true,
  },
  {
    id: 2,
    name: '任务管理系统',
    description: '高效的团队任务管理和协作平台',
    category: 'productivity',
    icon: MobileOutlined,
    image: '/xiaoguo.webp',
    author: '开发者A',
    stars: 856,
    views: 3421,
    downloads: 567,
    tags: ['管理', '协作', 'React'],
    featured: false,
  },
  {
    id: 3,
    name: '数据可视化大屏',
    description: '企业级数据可视化展示平台',
    category: 'data',
    icon: DesktopOutlined,
    image: '/xiaoguo.webp',
    author: '数据专家',
    stars: 2341,
    views: 8765,
    downloads: 1234,
    tags: ['数据', '可视化', 'D3.js'],
    featured: true,
  },
  {
    id: 4,
    name: 'API 网关服务',
    description: '微服务架构的 API 网关和管理平台',
    category: 'backend',
    icon: ApiOutlined,
    image: '/xiaoguo.webp',
    author: '架构师B',
    stars: 1567,
    views: 4532,
    downloads: 789,
    tags: ['API', '微服务', 'Node.js'],
    featured: false,
  },
])

// 分类选项
const categories = [
  { key: 'all', label: '全部', count: 156 },
  { key: 'ai', label: 'AI 应用', count: 42 },
  { key: 'productivity', label: '效率工具', count: 38 },
  { key: 'data', label: '数据分析', count: 25 },
  { key: 'backend', label: '后端服务', count: 31 },
  { key: 'frontend', label: '前端组件', count: 20 },
]

// 搜索处理
const handleSearch = () => {
  console.log('搜索:', searchKeyword.value)
}

// 查看应用详情
const viewApp = (app: any) => {
  console.log('查看应用:', app)
}

// 收藏应用
const starApp = (app: any) => {
  console.log('收藏应用:', app)
  // 这里可以实现收藏功能
}
</script>

<template>
  <div class="home-view">
    <!-- 顶部横幅 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title">一句话 做应用</h1>
        <p class="hero-subtitle">使用智能 AI 技术，我来帮你快速生成</p>
        <div class="hero-search">
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="描述你想要的应用，如：在线聊天室"
            size="large"
            @search="handleSearch"
          >
            <template #enterButton>
              <a-button type="primary" size="large">
                <SearchOutlined />
                生成
              </a-button>
            </template>
          </a-input-search>
        </div>
        <div class="hero-stats">
          <a-space :size="32">
            <div class="stat-item">
              <div class="stat-number">10,000+</div>
              <div class="stat-label">应用模板</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">50,000+</div>
              <div class="stat-label">用户使用</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">99.9%</div>
              <div class="stat-label">成功率</div>
            </div>
          </a-space>
        </div>
      </div>
    </div>

    <!-- 应用广场 -->
    <div class="apps-section">
      <div class="section-header">
        <h2 class="section-title">应用广场</h2>
        <p class="section-subtitle">发现优质应用，快速上手使用</p>
      </div>

      <!-- 分类筛选 -->
      <div class="category-filter">
        <a-space wrap>
          <a-tag
            v-for="category in categories"
            :key="category.key"
            :color="selectedCategory === category.key ? 'blue' : ''"
            class="category-tag"
            @click="selectedCategory = category.key"
          >
            {{ category.label }} ({{ category.count }})
          </a-tag>
        </a-space>
      </div>

      <!-- 应用网格 -->
      <div class="apps-grid">
        <div v-for="app in apps" :key="app.id" class="app-card" @click="viewApp(app)">
          <div class="app-image">
            <img :src="app.image" :alt="app.name" />
            <div v-if="app.featured" class="featured-badge">精选</div>
          </div>

          <div class="app-content">
            <div class="app-header">
              <div class="app-icon">
                <component :is="app.icon" />
              </div>
              <h3 class="app-name">{{ app.name }}</h3>
            </div>

            <p class="app-description">{{ app.description }}</p>

            <div class="app-tags">
              <a-tag v-for="tag in app.tags" :key="tag" size="small">
                {{ tag }}
              </a-tag>
            </div>

            <div class="app-meta">
              <span class="app-author">by {{ app.author }}</span>
              <div class="app-stats">
                <span class="stat-item">
                  <StarOutlined />
                  {{ app.stars }}
                </span>
                <span class="stat-item">
                  <EyeOutlined />
                  {{ app.views }}
                </span>
                <span class="stat-item">
                  <DownloadOutlined />
                  {{ app.downloads }}
                </span>
              </div>
            </div>
          </div>

          <div class="app-actions">
            <a-button type="primary" size="small" block> 立即使用 </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-view {
  padding: 0;
}

/* 顶部横幅区域 */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 0;
  text-align: center;
  color: white;
  margin: -32px -24px 48px -24px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-title {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 20px;
  margin-bottom: 40px;
  opacity: 0.9;
  font-weight: 300;
}

.hero-search {
  max-width: 600px;
  margin: 0 auto 48px;
}

.hero-search :deep(.ant-input-search) {
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.hero-search :deep(.ant-input) {
  border: none;
  padding: 16px 24px;
  font-size: 16px;
}

.hero-search :deep(.ant-btn) {
  border: none;
  height: 55px;
  /*padding: 16px 32px;*/
  font-size: 16px;
  font-weight: 600;
}

.hero-stats {
  margin-top: 48px;
}

.hero-stats .stat-item {
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(45deg, #fff, #f0f8ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 应用广场区域 */
.apps-section {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  color: #1677ff;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
}

.category-filter {
  margin-bottom: 32px;
  text-align: center;
}

.category-tag {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

.category-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(22, 119, 255, 0.2);
}

/* 应用卡片网格 */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.app-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f0f0f0;
}

.app-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border-color: #1677ff;
}

.app-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f4ff 100%);
}

.app-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.app-card:hover .app-image img {
  transform: scale(1.05);
}

.featured-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.app-content {
  padding: 20px;
}

.app-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.app-icon {
  font-size: 24px;
  color: #1677ff;
  margin-right: 12px;
}

.app-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.app-description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-tags {
  margin-bottom: 16px;
}

.app-tags .ant-tag {
  border-radius: 12px;
  border: none;
  background: #f0f8ff;
  color: #1677ff;
  font-size: 12px;
}

.app-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 16px;
}

.app-author {
  font-weight: 500;
}

.app-stats {
  display: flex;
  gap: 12px;
}

.app-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-actions {
  padding: 0 20px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0;
    margin: -20px -12px 32px -12px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .hero-stats {
    margin-top: 32px;
  }

  .hero-stats :deep(.ant-space) {
    flex-direction: column;
    gap: 24px;
  }

  .stat-number {
    font-size: 24px;
  }

  .section-title {
    font-size: 24px;
  }

  .apps-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .category-filter {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 14px;
  }

  .hero-search :deep(.ant-input) {
    padding: 12px 16px;
    font-size: 14px;
  }

  .hero-search :deep(.ant-btn) {
    padding: 12px 20px;
    font-size: 14px;
  }
}
</style>
